<script lang="ts" setup>
import { Message } from '@arco-design/web-vue'
import type { ClassInfoApi } from '@/apis'
import { LessonApi } from '@/apis'
import type { TableInstanceColumns } from '@/components/ProTable/type'
import { useDictLabel, useTable } from '@/hooks'

// const emit = defineEmits(['change'])
const form = reactive<LessonApi.LessonStudentQuery>({
  lessonId: '',
  studentClassStatus: 0,
})

const {
  tableData,
  loading,
  search,
  selectedKeys,
} = useTable(() => LessonApi.getLessonStudentList(form), { immediate: false })

const columns: TableInstanceColumns[] = [
  {
    title: '序号',
    width: 66,
    align: 'center',
    fixed: 'left',
    render: ({ rowIndex }) => h('span', {}, rowIndex + 1),
  },
  { title: '学生姓名', fixed: 'left', slotName: 'studentName' },
  { title: '来源', dataIndex: 'studentJoinType', slotName: 'studentJoinType' },
  // { title: '状态', dataIndex: 'studentClassStatus', slotName: 'studentClassStatus' },
  { title: '点名/签到方式', dataIndex: 'operateSource', slotName: 'operateSource' },
  { title: '点名/签到状态', dataIndex: 'signInStatus', slotName: 'signInStatus', align: 'center', width: 200 },
  {
    title: '操作',
    slotName: 'action',
    width: 100,
    align: 'center',
    fixed: 'right',
  },
]

const visible = ref<boolean>(false)
const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
})

// 点名
const signIn = async (data: LessonApi.LessonSignInReq) => {
  loading.value = true
  LessonApi.signIn(data).then((_res) => {
    Message.success('点名成功')
    search()
  }).finally(() => loading.value = false)
}

// 撤销
const unSignIn = async (data: LessonApi.LessonSignInReq) => {
  loading.value = true
  LessonApi.unSignIn(data).then((_res) => {
    Message.success('撤销成功')
    search()
  }).finally(() => loading.value = false)
}

const signInSingle = (record: ClassInfoApi.ClassStudentListResp) => {
  const data = {
    lessonId: record.lessonId,
    studentIdList: [record.studentId],
  }
  signIn(data)
}

const unSignInSingle = (record: ClassInfoApi.ClassStudentListResp) => {
  const data = {
    lessonId: record.lessonId,
    studentIdList: [record.studentId],
  }
  unSignIn(data)
}

const signInBatch = () => {
  const data = {
    lessonId: form.lessonId,
    studentIdList: selectedKeys.value as string[],
  }
  signIn(data)
}

const onCancel = () => {
  visible.value = false
}

const open = (lessonId: string) => {
  form.lessonId = lessonId
  search()
  visible.value = true
}

defineExpose({
  open,
})
</script>

<template>
  <a-modal
    v-model:visible="visible"
    title="签到点名"
    width="1040px"
    :footer="false"
    @cancel="onCancel"
  >
    <div class="h-80vh">
      <ProTable
        v-model:selected-keys="selectedKeys"
        :data="tableData"
        :columns="columns"
        :loading="loading"
        :pagination="false"
        :row-selection="rowSelection"
        :disabled-tools="['size', 'setting']"
        row-key="studentId"
        @refresh="search"
      >
        <template #toolbar-left>
          <a-button v-permission="['edu:class:write']" type="primary" size="small" :disabled="!selectedKeys.length" @click="signInBatch">
            <template #icon>
              <icon-check />
            </template>
            <span>批量点名</span>
          </a-button>
          <a-alert class="ml-xs">
            点名代表完成课消，课程开始前一个小时才允许点名，超过次月1日不允许补签
          </a-alert>
        </template>
        <template #studentName="{ record }">
          <CellStudent :id="record.studentId" :name="record.student.name" :avatar="record.student.avatar" :phone="record.student.parentPhone" />
        </template>
        <template #operateSource="{ record }">
          {{ useDictLabel('OperateSourceEnum', record.operateSource) }}
        </template>
        <template #studentJoinType="{ record }">
          <CellDict :value="record.studentJoinType" code="JoinTypeEnum" />
        </template>
        <template #signInStatus="{ record }">
          <a-space size="small">
            <CellStatus :status="record.signInStatus" on-text="" off-text="" />
            <span class="text-13px text-gray">{{ record.signInTime }}</span>
          </a-space>
        </template>
        <template #action="{ record }">
          <a-button v-if="!record.signInStatus" v-permission="['edu:class:write']" type="text" @click="signInSingle(record)">
            点名
          </a-button>
          <a-button v-else v-permission="['edu:class:write']" type="text" status="danger" @click="unSignInSingle(record)">
            撤销
          </a-button>
        </template>
      </ProTable>
    </div>
  </a-modal>
</template>

<style lang="less" scoped>
</style>
